<template>
  <div>
    <!-- 积分兑换商品详情页 -->
    <div class="exchange-detail" v-if="showExchangeDetail">
      <div class="top-wrap">
        <!-- 后台：商品评价--关闭后商品详情页将不显示评价和顶部主页按钮 -->
        <top-shade v-if="detailAll.is_comment==1" :topInfo="topInfo" :detailAll="detailAll" />

        <top-banner :itemDetail="itemDetail"></top-banner>
      </div>

      <div class="mid-wrap">
        <div class="middle-info-item title-price-box">
          <div class="points"><span>{{detailAll.point_name}}：</span><span class="number">{{detailAll.item_detail.points}}</span></div>
          <div class="goods-title">
            <span class="goods-title-txt">{{detailAll.item_detail.title}}</span>
          </div>
          <div class="goods-other clearfix">
            <div class="goods-other-item">库存:
              <span>{{detailAll.item_detail.num}}{{detailAll.item_detail.unit}}</span>
            </div>
            <div class="goods-other-item" v-if="detailAll.item_detail.freight_payer!=3">运费:
              <span v-if="detailAll.item_detail.post_fee>0">&yen;{{detailAll.item_detail.post_fee}}</span>
              <span v-else-if="detailAll.item_detail.full_num_text">{{detailAll.item_detail.full_num_text}}</span>
              <span v-else>（包邮）{{detailAll.item_detail.full_num_text}}</span>
            </div>
          </div>
        </div>
        <!-- 商品评价 -->
        <div id="detailComment" class="middle-info-item detailComment" v-if="detailAll.is_comment">
          <div class="criticism">
            商品评价（{{detailAll.item_comment.length}}）
            <span class="all_evaluate_right" v-if="detailAll.item_comment.length>0" @click="Jump('itemComment',{id:detailAll.item_detail.item_id})">查看全部
              <i class="icon-right"></i>
            </span>
          </div>
          <div class="detail-comment" v-if="detailAll.item_comment.length!=0">
            <div class="comment_top clearfix">
              <span class="comment_head_img fl">
                <img :src="detailAll.item_comment[0].head_portrait" alt="">
              </span>
              <span class="comment_score fl">
                <b>{{detailAll.item_comment[0].mobile}}</b><br/>
                <i><img :src="detailAll.item_comment[0].describe_star" alt=""></i>
              </span>
            </div>
            <p class="comment_content">{{detailAll.item_comment[0].detail}}</p>
            <div  class="comment_bottom">
              <span>{{detailAll.item_comment[0].sku_name}}</span>
            </div>
          </div>
        </div>

        <!-- 详情 -->
        <section id="detailWrap" class="detail_logo block_logo">
          <span class="liner_detail"></span>
          <span class="detail_content">详情</span>
          <span class="liner_detail"></span>
        </section>
        <section class="mdetail_goodsdet content_detail">
          <section class="mdetail_goodsdet_con">
            <section class="detailConPanel">
              <div class="detailCon members_con decorate-editor exchange-editor"
                :style="detailAll.is_item_detail_blank == 1?'padding:10px;':'padding:0'">
                <div v-html="detailAll.diyHtml"></div>
              </div>
            </section>
          </section>
        </section>
        <!-- 详情end -->
      </div>
      <div class="bottom-fixed">
        <fixed-button :exchange="true" :detailAll="detailAll"></fixed-button>
      </div>
    </div>
     <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
import Vue from 'vue'
import topShade from './../topShade'
import topBanner from './../topBanner'
import fixedButton from './../fixedButton'
import { exchangeDetail } from '@/api/item/item'
import { mpShare } from '@/utils/utils'
import editorHtml from '@/components/diyTpl/decoration/editor/index.vue'
import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
import small from '@/smallapp/small'

export default Vue.extend({
  name: 'index',
  components: {
    topShade,
    topBanner,
    fixedButton,
    editorHtml,
    SmallLogin
  },
  data() {
    return {
      smallQuery: {},
      showExchangeDetail: false,
      id: '',
      description: '',
      diyHtml: '',
      detailAll: {},
      itemDetail: {},
      tplItemData: {
        modulePadding: 0,
        isPreview: false,
        fulltext: ''
      },
      topInfo: {
        user_need_open_store_gift: 1, // 不显示购物车
        showTj: false,
        is_detail_code: 0 // 不显示顶部二维码按钮
      }
    }
  },
  methods: {
    /**
       * 链接跳转
       */
    Jump(url, data) {
      this.$JumpName(this, url, data)
    },
    init() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 50000)

      exchangeDetail({ id: this.id }).then((res) => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
          // 如果有视频，轮播图多一张主图
          if (resData.item_detail.video_url) {
            resData.item_detail.img_path.unshift(resData.item_detail.img_path[0])
          }
          this.detailAll = resData

          this.tplItemData = {
            modulePadding: resData.modulePadding,
            isPreview: resData.isPreview,
            fulltext: resData.description + resData.diyHtml
          }
          this.itemDetail = resData.item_detail
          this.showExchangeDetail = true

          const shareInfo = {
            title: resData.item_detail.title,
            imgUrl: resData.item_detail.img_path[0],
            shareParam: `id=${resData.item_detail.point_exchange_id}&pid=${small.wxCache('pid')}`
          }

          // console.log(shareInfo, '分享信息')

          mpShare(true, false, '/goods/pages/exchangeDetail/index', shareInfo)
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    window.addEventListener('wxload', (query) => {
      // scene=3015nqnq0b2f39e0d
      this.smallQuery = Object.assign(this.$route.query, query)
      small.HandleShareParams()
      this.id = this.smallQuery.id
      // console.log('created积分详情smallQuery', this.smallQuery)
      this.init()
    })
    window.addEventListener('wxshow', () => {
      if (!small.checkLogin()) {
        // this.$refs.smalllogin.openSmallLoginPop()
      }
    })
    window.$$subscribe('loginReload', (reload) => {
      if (reload) {
        this.init()
      }
    })
  }
})
</script>

<style lang="scss">
  @import "src/styles/mixin";
  @import "src/styles/variables";
  .exchange-detail{
    .middle-info-item{
      margin-bottom:20px;
      padding: 20px 30px;
      border-radius:20px;
      background: #fff;
    }
    .points{
      display:flex;
      line-height:1;
      align-items:center;
      font-size:28px;
      color:#F42B2B;
      .number{
        font-size:40px;
        font-weight:bold;
      }
    }
    .goods-title{
      margin:20px 0;
      @include lineClamp(28px,1.5,2);
      font-weight: bold;
    }
    .goods-other{
      margin-top: 20px;
      font-size: 0;
      flex-direction: row;
      >div{
        display:inline-block;
      }
      .goods-other-item{
        float:left;
        font-size: 24px;
        width:230px;
        color: #999;
        line-height: 40px;
      }
    }
    //评价
    /*
    * #detailComment 修改成.detailComment
    * author: wuzhiying
    * Last Modified time: 2020-07-18 15:03
    */
    .detailComment{
      padding: 30px;
      background: #fff;
      border-radius: 20px;
      .criticism {
        font-size: 28px;
        position: relative;
        // padding-bottom:24px;
        .all_evaluate_right {
          font-size: 24px;
          line-height: 28px;
          color: #999999;
          float: right;
          .all-class-icon{
            font-weight: bold;
            width: 16px;
          }
        }
      }
      .detail-comment{
        margin-top:24px;
        border-radius: 6px;
        background: #F7F7F7;
        padding: 30px 25px;
        .comment_top {
          padding-bottom: 10px;
          .comment_head_img {
            display: inline-block;
            width: 62px;
            height: 62px;
            border-radius: 50%;
            vertical-align: middle;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .comment_score{
            margin-left:14px;
          }
          b {
            display: inline-block;
            font-weight: normal;
            vertical-align: middle;
            font-size: 28px;
          }
          i {
            img {
              width: 112px;
              height: 16px;
              display: inline-block;
              vertical-align: top;
              margin-top: 9px;
            }
          }
        }

        .comment_content {
          @include lineClamp(26px,34px,2);
        }

        .comment_bottom {
            margin: 5px 0 0;
            color: #999;
        }
      }
    }
    //详情等标题
    .block_logo{
      font-size: 28px;
      text-align: center;
      padding: 30px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      .detail_content{
        padding:0 30px;
      }
      .liner_detail{
        height: 2px;
        width: 165px;
        background: #E6E6E6;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          background:#E6E6E6 ;
          width: 8px;
          height: 8px;
          top: 0;
          transform: rotate(-45deg) translateY(-50%);
        }
        &:first-child{
          &::after{
            right: -3px;
          }
        }
        &:last-child{
          &::after{
            left: 3px;
          }
        }
      }
    }
    .exchange-editor{
      image{
        line-height: 0 !important;
      }
      .members_imgad{
        img{
          width:100% !important;
        }
      }
    }
  }
</style>
